<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工程合同详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../resources/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../resources/css/style.css">
    <style>
        .details ul li {width: 50%;float: left;}
        .layui-table thead th{text-align: left;}
        .layui-table td{text-indent: 1rem; font-size: 12px; color: #333;}
        .detailed{background-color: #FFF; font-size: 12px; color: #333333; line-height: 24px;margin-top: 8px;}
        /*.details ul,li{list-style: inherit;}*/
        .detailed p:after {
            content: "\0020";
            display: block;
            height: 0;
            clear: both;
        }
        .detailed p:before {content: "● "; color: #e3e3e3; font-size: 12px; margin-right: 5px; float: left;}
        .detailed .detaL{width: 120px;display: inline-block; float: left;    padding-right: 20px;}
        .detailed .dataR{display: inline-block;float: left;}
        .detailed p{margin-bottom: 10px;}

        .detailedfoot ul {display: flex;justify-content: space-around;}
        .layui-table thead th{text-align: left;}

        .layui-table td{text-indent: 1rem; font-size: 12px; color: #333;}
        table tbody tr td{text-align: left;}
        .maskmain table td, th{text-align: left;}
        .detailedfoot{padding: 15px 35px;height:50%;overflow: auto;}
        .engineering{width: 49%;display: inline-block;float: left; padding: 0 10px;margin-left: -10px;height: 400px;margin-bottom: 20px;}
        .details{height: 20%;}
        .titles{height: 10%;}
        .detailwarp{padding-left:22px;}
        @media screen and (max-width: 750px){
            .MOVE_list {height: 180px;padding: 16px 0;background-color: #F7F7F7;}
            #LAY_demo1 li{border-bottom: 3px solid #DBE7FF;}
            .MOVE_detailsBOT{border-top: 2px solid #EBEBEB;}
        }


    </style>
</head>
<body>
<form class="layui-form layui-form-pane" action="" >
    <button class="layui-btn _PC" onclick="history.back(-1)" style="margin-left: 24px;"><i class="layui-icon">
    </i></button>
    <div class="detailwarp _PC">

    </div>
    <div class="_MOVE">
        <div class="MOVE_title">
            <div class="site-tree-mobile layui-show" onclick="history.back(-1)">
                <i class="layui-icon">&#xe603;</i>
            </div>
            <span class="zhanwei"></span>
            <p class="MOVE_biaoti">工程材料需求申请单</p>
            <span class="shousuo"><a href="###" style="color: #FFFFFF;">编辑</a></span>

        </div>
        <div class="querylist">

        </div>
        <div class="MOVE_main">
            <ul class="flow-default" id="LAY_demo1">
                <!--<li>-->
                <!--<div class="MOVE_details">-->
                <!--<div class="MOVE_list">-->
                <!--<p><span class="MOVE_listL">项目名称：</span><span class="MOVE_listR">厂北路-郑上路</span></p>-->
                <!--<p><span class="MOVE_listL">申请人：</span><span class="MOVE_listR">郑州市金水区  </span></p>-->
                <!--<p><span class="MOVE_listL">创建时间：</span><span class="MOVE_listR">2017-10-13 13:02:57</span></p>-->
                <!--<p><span class="MOVE_listL">供货时间：</span><span class="MOVE_listR">等待签收</span></p>-->
                <!--<p><span class="MOVE_listL">收货地址：</span><span class="MOVE_listR">等待签收</span></p>-->
                <!--</div>-->

                <!--</div>-->
                <!--<div class="MOVE_detailsBOT">-->
                <!--<p><span class="MOVE_listL">材料名称：</span><span class="MOVE_listR">厂北路-郑上路</span></p>-->
                <!--<p><span class="MOVE_listL">规格：</span><span class="MOVE_listR">郑州市金水区  </span></p>-->
                <!--<p><span class="MOVE_listL">数量：</span><span class="MOVE_listR">郑州市金水区  </span></p>-->
                <!--<p><span class="MOVE_listL">备注：</span><span class="MOVE_listR">郑州市金水区  </span></p>-->
                <!--</div>-->

                <!--</li>-->
                <!--<li>-->
                <!--<div class="MOVE_details">-->
                <!--<div class="MOVE_numbers">-->
                <!--<span class="MOVE_numberson">201702</span>-->
                <!--<span class="layui-badge MOVE_statetow">未完成</span>-->
                <!--</div>-->
                <!--<div class="MOVE_list">-->
                <!--<p><span class="MOVE_listL">工程名称：</span><span class="MOVE_listR">厂北路-郑上路厂北路-郑上路厂北路-郑上路厂北路-郑上路厂北路-郑上路厂北路-郑上路厂北路-郑上路厂北路-郑上路厂北路-郑上路厂北路-郑上路</span></p>-->
                <!--<p><span class="MOVE_listL">供货地址：</span><span class="MOVE_listR">郑州市金水区  </span></p>-->
                <!--<p><span class="MOVE_listL">供货时间：</span><span class="MOVE_listR">2017-10-13  13:02:57</span></p>-->
                <!--<p><span class="MOVE_listL">签收状态：</span><span class="MOVE_listR">等待签收</span></p>-->
                <!--</div>-->

                <!--</div>-->

                <!--</li>-->
            </ul>
        </div>

    </div>


</form>

<script src="../../../resources/layui/layui.js" charset="utf-8"></script>
<script src="../../../resources/js/style.js"></script>
<script src="../../../resources/js/api.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate','flow'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;


        var brttrtArray = {};   //新建一个对象  用以数据去重


        ajaxs('/api/ctteam/loadMatFeedDetail.do', 'post', {'cc_uuid': sessionStorage.xuqiuUID}, function (data) {
            var gongchenggaikuo = '';
            console.log(data.data)

            var myData = data.data && data.data[0] || [];                       //防止获取数据为空导致报错

            //循环去重
            $.each(myData, function (index, value) {                            //循环获取到的对象
                brttrtArray[value.feed_Code] = brttrtArray[value.feed_Code] || []       //将值传递给自定义对象作为一个方法
                brttrtArray[value.feed_Code].push(value)                           //将内容放入对象的方法内作为一个对象;
            })
            console.log(brttrtArray)
            for (var key in brttrtArray) {                      //循环获取对象的某一个

                $('.detailwarp').append('<div class="engineering">' +           //添加电脑端共有部分
                    '    <div class="titles" names="' + key + '">' + key + '</div>' +
                    '    </div>');

                $('#LAY_demo1').append('<li><div class="MOVE_details">\n' +
                    '                        <div class="MOVE_list">\n' +
                    '                            <p names_mo="'+key+'"><span class="MOVE_listL MOVE_DET" >任务单号：</span><span class="MOVE_listR">'+key+'</span></p>\n' +
                    '                        </div>\n' +
                    '                    </div>' +
                    '                    <div class="MOVE_detailsBOT"></div></li>')

                var arr = Array;
                for (var i = 0; i < brttrtArray[key].length; i++) {             //循环对象的某一个的数组
//                    arr = brttrtArray[key][i].feed_Code;
                    //添加电脑端共有部分
                    if (i == 0) {
                        console.log(i,'<><><><<><>><><><>><')
                        //判断是否是第一次渲染
                        $("[names='" + key + "']").after('<div class="details">\n' +
                            '        <ul>\n' +
                            '            <li><span class=\'detaL\'>项目名称：</span><span class="dataR">' + brttrtArray[key][i].eppName + '&nbsp;&nbsp;&nbsp;' + brttrtArray[key][i].eppStaEnd + '</span></li>' +
                            '            <li><span class=\'detaL\'>申请人：</span><span class="dataR">' + brttrtArray[key][i].feed_sqr + '</span></li>\n' +
                            '            <li><span class=\'detaL\'>创建时间：</span><span class="dataR">' + brttrtArray[key][i].createTime + '</span></li>\n' +
                            '            <li><span class=\'detaL\'>供货时间：</span><span class="dataR">' + brttrtArray[key][i].supply_Time + '</span></li>\n' +
                            '            <li><span class=\'detaL\'>收货地址：</span><span class="dataR">' + brttrtArray[key][i].f_adr + '</span></li>\n' +
                            '        </ul>\n' +
                            '    </div>' +
                            ' <div class="detailed">\n' +
                            '    </div>' +
                            ' <div class="detailedfoot">' +
                            '<table>\n' +
                            '           <thead class="detailedfoot_thea">\n' +
                            '               <th>材料名称</th>\n' +
                            '               <th>材料规格</th>\n' +
                            '               <th>申请数量</th>\n' +
                            '               <th>审核状态</th>\n' +
                            '           </thead>\n' +
                            '<tbody></tbody>' +
                            '</table>' +
                            '</div>');
//                        console.log(brttrtArray[key][i].eppName,'asdasdsadad')
                        $("[names_mo='" + key + "']").after('<p><span class="MOVE_listL">项目名称：</span><span class="MOVE_listR">'+brttrtArray[key][i].eppName + '&nbsp;&nbsp;&nbsp;' + brttrtArray[key][i].eppStaEnd+'</span></p>'+
                            '                            <p><span class="MOVE_listL">申请人：</span><span class="MOVE_listR">'+brttrtArray[key][i].feed_sqr+'  </span></p>\n' +
                            '                            <p><span class="MOVE_listL">创建时间：</span><span class="MOVE_listR">'+brttrtArray[key][i].createTime+'</span></p>\n' +
                            '                            <p><span class="MOVE_listL">供货时间：</span><span class="MOVE_listR">'+brttrtArray[key][i].supply_Time+'</span></p>\n' +
                            '                            <p><span class="MOVE_listL">收货地址：</span><span class="MOVE_listR">'+brttrtArray[key][i].f_adr+'</span></p>')
                    }


                    switch (brttrtArray[key][i].validate) {             //判断状态
                        case -1:
                            brttrtArray[key][i].validate = '审核中';
                            break;
                        case 0:
                            brttrtArray[key][i].validate = '通过';
                            break;
                        case 1:
                            brttrtArray[key][i].validate = '不通过';
                            break;
                    };
                    //添加移动端非共有部分
                    $("[names_mo='" + key + "']").parent().parent().next().append(' <p><span class="MOVE_listL">材料名称：</span><span class="MOVE_listR">'+ brttrtArray[key][i].mat_Name+'</span></p>\n' +
                        '                        <p><span class="MOVE_listL">规格：</span><span class="MOVE_listR">'+ brttrtArray[key][i].mat_Spec +'  </span></p>\n' +
                        '                        <p><span class="MOVE_listL">数量：</span><span class="MOVE_listR">'+brttrtArray[key][i].feed_Num+'  </span></p>\n' +
                        '                        <p><span class="MOVE_listL">备注：</span><span class="MOVE_listR">'+brttrtArray[key][i].validate+'  </span></p>')


                    //添加电脑端非共有部分
                    $("[names='" + key + "']").next().next().next().children().children('tbody').append(' <tr>\n' +
                        '        <td>' + brttrtArray[key][i].mat_Name + '</td>\n' +
                        '        <td>' + brttrtArray[key][i].mat_Spec + '</td>\n' +
                        '        <td>' + brttrtArray[key][i].feed_Num + '</td>\n' +
                        '        <td>' + brttrtArray[key][i].validate + '</td>\n' +
                        '    </tr>')
                }
            }
        })


    })
</script>
</body>
</html>